<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-22 16:29:09
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-05 10:46:57
 -->
<template>
  <div class="simple-select">
    <vxe-grid
      ref="table"
      size="mini"
      border
      highlight-hover-row
      highlight-current-row
      header-row-class-name="header-row"
      :columns="columnsData"
      :data="tableData.default"
      :loading="tableLoading.default"
      v-bind="$attrs"
      v-on="$listeners"
    />
    <div class="text-center">
      <el-pagination
        mini
        layout="prev, pager, next"
        :total="pageInfo.total"
      />
    </div>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import _ from 'lodash'

export default {
  name: 'SelectSimGoodsList',
  mixins: [oftenuse],
  props: {
    /**
     * 查询参数
     */
    queryData: {
      type: Object,
      default: () => { return {} }
    },
    /**
     * 列数据
     */
    columnsData: {
      type: Array,
      default: () => { return [] }
    },
    /**
     * 请求方法
     */
    postMethod: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dataObj: {}
    }
  },
  computed: {
  },
  created() {
    this.pageInfo.size = 10
  },
  mounted() {
    this.searchGoods(this.queryData)
  },
  destroyed() {
  },
  methods: {
    searchGoods: _.debounce(function(searchData) {
      const params = { data: searchData, page: this.pageInfo }
      this.listData(params)
    }, 200),
    listData(params = { data: this.queryData, page: this.pageInfo }) {
      this.setTableLoading('default', true)
      return new Promise((resolve, reject) => {
        this.postMethod(params).then(res => {
          if (!res.data.flag) return
          let records = res.data.data.records || []
          records = this.formatListData(records)
          this.setTableData('default', records)
          this.setTableLoading('default', false)
          this.pageInfo.total = res.data.total
          if (records.length > 0) {
            this.$refs.table.setCurrentRow(records[0])
          }
          resolve(records)
        }).catch(err => {
          reject(err)
          this.setTableLoading('default', false)
        })
      })
    },
    formatListData(data) {
      data.forEach(item => {
        const { originQuantity, quantityIn, quantityOut, waitQuantityIn, waitQuantityOut } = item
        const canUseQty = this.$amount(originQuantity).add(quantityIn)
          .add(waitQuantityIn).subtract(quantityOut).subtract(waitQuantityOut).format()
        const nowQty = this.$amount(originQuantity).add(quantityIn)
          .subtract(quantityOut).format()
        item.nowQty = nowQty
        item.canUseQty = canUseQty
      })
      return data
    }
  }
}
</script>

<style lang="scss" scoped>
.simple-select{
  background: #fff;
  border: #419efb 2px solid; overflow: auto;
  /deep/.vxe-table.size--mini .vxe-body--column:not(.col--ellipsis), .vxe-table.size--mini .vxe-footer--column:not(.col--ellipsis), .vxe-table.size--mini .vxe-header--column:not(.col--ellipsis){
    padding: 0;
  }
  /deep/.vxe-body--column{
    height: 18px !important;
  }
}
</style>

